<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户设置</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">

    <link rel="stylesheet" href="../elementui/index.css">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/videoDetail.css">
    <link rel="stylesheet" href="../css/index.css">
<!--    <link rel="stylesheet" href="../css/online.css">-->
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/course.css">
    <script src="../js/vue-v2.6.10.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<style>
    main .pageNum {
        width: 1180px;
        height: 40px;
        margin: 0 auto;
        margin-top: 20px;
        text-align: center;
    }
    main .pageNum ul {
        text-align: center;
        line-height: 25px;
        font-size: 18px;
        display: inline-block;
    }
    main .pageNum ul li {
        display: inline-block;
        width: 37px;
        height: 40px;
        padding: 9px 14px 6px;
        color: #333;
        background: #ededed;
        border-radius: 4px;
        font-family: PingFangSC-Semibold, PingFang SC;
        margin-right: 12px;
    }
    main .pageNum ul li.active {
        background: #80C4AE;
        color: #fff;
    }
    main .pageNum button {
        width: 91px;
        height: 40px;
        outline: none;
        border: none;
        background: #ededed;
        font-size: 18px;
        color: #a4a4a4;
        padding: 9px 19px 6px 18px;
        border-radius: 4px;
        margin: 0 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
    }
    main .pageNum button.active {
        color: #333;
    }
    main .pageNum button:last-child {
        margin-left: 8px;
    }
</style>
<body>
<div id="app">
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/login/qichezulin.png" alt="" class="logo">
            <ul>

                <li class="check"><a href="../index.html">自驾租车</a></li>

            </ul>
            <div class="search">
                <div class="left">车型<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/public/search.png" alt="">
            </div>

            <div class="login" v-show="f1">
                <a href="./loginAndRegister/login.html">登陆</a>
                /
                <a href="./loginAndRegister/register.html">注册</a>
            </div>

            <div class="user" v-show="f2">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>{{member.memberName}}</li>
                        <a href="ordercenter.html">
                            <li>订单中心</li>
                        </a>

                        <a href="./loginAndRegister/login.html">
                            <li class="out">退出登陆</li>
                        </a>
                    </ul>
                </div>
            </div>

        </div>
    </nav>
    <!-- 主体内容 -->
    <main>
        <div class="leftNav" id="leftNav">
            <ul>
                <li class="list">
                    <p class="class">
                        <span>订单中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select"> <a :href="'./course.html?memberId='+member.memberId">我的订单</a></li>
                    </ol>
                </li>

            </ul>
        </div>
        <div class="rightUser">
            <div class="title_top">
                <span>账户设置</span>
                <span>&gt;</span>
                <span>我的订单</span>
            </div>
            <!-- 课程列表 -->
            <div class="lesson">
                <ul class="clearfix">
                    <li v-for = "item in frontOrderResponseVoList">
                        <div class="top">
                            <!--                            <a :href="'./pages/carDetail.html?id='+item.id+'&startDate='+pagination.startDate+'&endDate='+pagination.endDate">-->
                            <img :src="item.img" alt=""class="m"></a>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <span style="text-align: left; font-weight: 700;font-size: 16px">{{item.carName}}</span>
                                <p class="time">{{item.type}}|{{item.gears}}|{{item.site}}座</p>
                            </div>
                            <div class="right" style="position: relative;bottom: 40px">预约中</a></div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <div style="clear: both;"></div>
        <div class="pageNum">
            <button class="point" @click="changeCurrentPage(1)">首页</button>
            <button class="point" @click="changeCurrentPage(prePage)">上一页</button>
            <ul>
                <li class = "point" v-for = "page in totalPage" :class="{active:page==pagination.pageIndex}" @click = "changeCurrentPage(page)">{{page}}</li>
            </ul>
            <button class="point" @click="changeCurrentPage(nextPage)">下一页</button>
            <button class="point" @click="changeCurrentPage(totalPage)">尾页</button>
        </div>
    </main>
    <!-- 底部栏 -->
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>
</div>
<!-- 固定导航 -->
<div class="fix">
    <div class="lesson">
        <img src="../img/index/mylesson.png" alt="">
    </div>
    <div class="test">
        <img src="../img/index/mytest.png" alt="">
    </div>
    <div class="top">
        <img src="../img/index/gotop.png" alt="">
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            pagination:{
                pageIndex:1,
                pageSize:4,
                memberId:"",
            },
            frontOrderResponseVoList:"",
            member:"",
            f1:true,
            f2:false,
            totalCount:"",
            prePage:"",
            nextPage:"",
            totalPage:"",
        },
        methods: {
            findByPageFront(){
                var url =location.href;
                var id = url.substring(url.lastIndexOf("=")+1);
                this.pagination.memberId=id;
                axios.post("/carOrder/selectOrderById",this.pagination).then(resp =>{
                    console.log(resp)
                    this.frontOrderResponseVoList=resp.data.data.page.list;
                    this.prePage=resp.data.data.page.prePage;
                    this.totalCount=resp.data.data.page.totalCount;
                    this.totalPage = resp.data.data.page.totalPage;
                    this.nextPage=resp.data.data.page.nextPage;
                })
            },
            initParams(){
                var str = window.sessionStorage.getItem("login");
                console.log(str);
                if(str!=null && str!=""){
                    this.member = JSON.parse(str);
                    this.f2=true;
                    this.f1=false;
                }else{
                    this.f1=true;
                    this.f2=false;
                }
            },
            //改变页码
            changeCurrentPage(page){
                this.pagination.pageIndex=page;
                this.findByPageFront();

            },
        },
        created() {
            this.findByPageFront();
        },
        mounted() {
            this.initParams();
        }

    })
</script>
</html>